<!doctype html> 
<meta charset = "utf-8"> 
<title>Point collision</title>
<body>
<script src="../ga.js"></script>
<script src="../plugins.js"></script>
<script>

/*
This file requires these convenience functions from `plugins.js`:
`hitTestPoint`
*/

//Create a new GA instance, and start it.

var g = ga(256, 256, setup);
g.start();

//Declare global sprites, objects, and variables
//that you want to access in all the game functions and states

var box, ball;

//A `setup` function that will run only once.
//Use it for initialization tasks
function setup() {

  //Make the background white and add a border to the canvas
  g.backgroundColor = "white";
  g.canvas.style.border = "1px black dashed";

  //Make a square
  box = g.rectangle(64, 64, "blue");
  g.stage.putCenter(box, box.halfWidth + 16, box.halfHeight + 16);
  
  //Make a circle
  ball = g.circle(64, "red");
  g.stage.putCenter(ball, -ball.radius - 16, -ball.radius -16);

  //Add some text 
  message = g.text(
    "No collision...", 
    "16px sans-serif",
    "black", 10, 10
  );
    
  //Change the state to `play`
  g.state = play;  
}

//The `play` function will run in a loop
function play() {

  //Set the default message content 
  message.content = "No collision...";

  /*
  Check for a collision between the pointer and the 
  ball and box. The collision variables will be `true`
  if there's a collision and `false` if there isn't.
  Use the univeral `hit` method to do the collision check.
  `hit` arguments (only the first two are required):
  spriteA, spriteB, reactToCollision?, bounce?, useGlobalCoordinates?
  actionWhenCollisionOccurs
  */

  var boxCollision = g.hit(g.pointer, box);
  var ballCollision = g.hit(g.pointer, ball);

  //You can alternatively use the lower-level `hitTestPoint` method
  //`hitTestPoint` arguments:
  //pointObject, sprite
  /*
  var boxCollision = g.hitTestPoint(g.pointer.position, box),
      ballCollision = g.hitTestPoint(g.pointer.position, ball);
  */

  //Change the message if there's a collision with the box
  if(boxCollision) {
    message.content = "Box!"; 
  }

  //Change the message if there's a collision with the ball
  if(ballCollision) {
    message.content = "Ball!"; 
  }
}
</script>
</body>

